<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>Franker Options</title>
		<script type="text/javascript">

			// Saves options to localStorage.
			function save_options() {
				var saveButton = document.getElementById('saveButton');
				saveButton.disabled = false;
				save_option("engine",   "engine");
				save_option("langSrc",  "langSrc");
				save_option("langDst",  "langDst");
				save_option("frankate", "shortcutFrankate");
				save_option("clean",    "shortcutClean");
				save_option("style",    "style");
				save_option("inject_before",   "inject_before");
				save_option("inject_brackets", "inject_brackets");
				var status = document.getElementById("status");
				status.style.display = "block";
				setTimeout(function() {status.style.display = "none";}, 1750);
			}

			function save_option(id, name) {
				var elem = document.getElementById(id);
				if (id == "langSrc" || id == "langDst") {
					localStorage[name] = elem.children[elem.selectedIndex].value;
				} else if (id == "inject_before" || id == "inject_brackets") {
					localStorage[name] = elem.checked+"";
				} else {
					localStorage[name] = elem.value;
				}
			}

			// Restores select box state to saved value from localStorage.
			function load_options() {
				load_option("engine",   "engine");
				load_option("langSrc",  "langSrc");
				load_option("langDst",  "langDst");
				load_option("frankate", "shortcutFrankate");
				load_option("clean",    "shortcutClean");
				load_option("style",    "style");
				load_option("inject_before",   "inject_before");
				load_option("inject_brackets", "inject_brackets");
			}
			
			function load_option(id, name) {
				var value = localStorage[name];
				if (!value) {
					return;
				}
				var elem = document.getElementById(id);
				if (id == "engine" || id == "langSrc" || id == "langDst") {
					for (var i = 0; i < elem.children.length; i++) {
						var child = elem.children[i];
						if (child.value == value) {
							child.selected = "true";
							break;
						}
					}
				} else if (id == "inject_before" || id == "inject_brackets") {
					elem.checked = (value == "true");
				} else {
					elem.value = value;
				}
			}

		</script>
		<style>
			body {
				font:80%/1 sans-serif;
				background-color: #EEE;
			}
			h1 {
				text-align: center;
			}
			fieldset {
				padding: 1em;
				border: 1px solid black;
				margin-bottom: 1em;
				background-color: #FFF;
			}
			label {
				float:left;
				width:40%;
				margin-right:0.5em;
				padding-top:0.2em;
				text-align:right;
			}
			legend {
				font-weight:bold;
			}
			#status {
				padding: 1em;
				display: none;
				text-align: right;
				position: absolute;
				top: 2em;
				right: 10%;
			}
		</style>
	</head>
	<body onload="load_options()">
		<h1>Franker options</h1>
		<div style="padding-left: 10%; padding-right: 10%;">
			
		<fieldset>
		    <legend>Main</legend>
			
			<label for="engine">Translation provider:</label>
			<select name="engine" id="engine" tabindex="1" onchange="save_options();" style="width:150px;">
				<option selected="" value="GOOGLE">Google Translate</option>
				<option value="BING">Bing Translator</option>
			</select>

			<br/>
			
			<label for="langSrc">Translate from:</label>
			<select name="langSrc" id="langSrc" tabindex="2" onchange="save_options();" style="width:150px;"><option selected="" value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian ALPHA</option><option value="az">Azerbaijani ALPHA</option><option value="eu">Basque ALPHA</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian ALPHA</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole ALPHA</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="la">Latin ALPHA</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu ALPHA</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select>
			
			<br/>
			
			<label for="langDst">Translate to:</label>
			<select name="langDst" id="langDst" tabindex="3" onchange="save_options();" style="width:150px;"><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian ALPHA</option><option value="az">Azerbaijani ALPHA</option><option value="eu">Basque ALPHA</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option selected="" value="en">English</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian ALPHA</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole ALPHA</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="la">Latin ALPHA</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu ALPHA</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select>
			
		</fieldset>
		
		<fieldset>
			<legend>Shortcuts</legend>
			<label for="frankate">Frankate selection:</label> <input type="text" name="frankate" id="frankate" value="Ctrl+Alt+F"  onchange="save_options();" style="width:150px;"><br>
			<label for="clean">Clean page:</label> <input type="text" name="clean" id="clean" value="Ctrl+Alt+C" onchange="save_options();" style="width:150px;"><br>
		</fieldset>
		
		<fieldset>
			<legend>Translated text</legend>
			<label for="style">Style:</label> <input type="text" name="style" id="style" value="color: #292;" onchange="save_options();" style="width:150px;"><br>
			<label for="inject_brackets">Surround by brackets:</label> <input type="checkbox" name="inject_brackets" id="inject_brackets" checked="checked" onchange="save_options();" style="height: 1.5em;"><br>
			<label for="inject_before">Inject before original:</label><input type="checkbox" name="inject_before" id="inject_before" onchange="save_options();"><br>
		</fieldset>
		
		<div align="center">
			<input id="saveButton" type="button" value="Save changes" disabled="disabled" onclick="save_options();this.disabled=true;"/>
		</div>

		<div style="padding: 1em;">
			<p>
				This extension is for persons who study one or more languages and want to expand their vocabulary.<br/>
				Franker helps you learn new words and phrases in context, enabling sentence-to-sentence translation for web sites.<br/>
				You simply read news and study language, <em>isn't that nice</em>?
			</p>
			<p>
				This is how it works.<br>
				You select a block of text on a web page and Franker then splits it to sentences, translates them one-by-one and injects the translation directly after every original sentence. So you read chunk of original text first, then translation. This way you learn new words quickly and in context. Moreover, you must not try to remember new words, this is not necessary, you'll meet them again soon. Just proceed reading some interesting blog post, news or article on the Web!<br>
				...or you can just use Franker as a quick translation tool.
			</p>
			<p>
				Check also:
				<ul>
					<li><a href="http://franker.googlecode.com/">Franker for Safari</a></li>
					<li><a href="http://itunes.apple.com/app/franker/id384356597">Franker for iPhone</a> (and other iDevices)</li>
				</ul>
			</p>
			<p>
				Translation is powered by Google Translate service. This machine translation is good enough (to English at least) to help you understand the meaning, improve your knowledge and expand vocabulary.
			</p>
			<p>
				Inspired by <a href="http://english.franklang.ru/">Ilya Frank's Reading Method</a> for books.
			</p>
			<p>
				<em>
				Good luck and enjoy reading web sites in foreign languages!<br>
				Yurii Soldak: ysoldak.apps@gmail.com
				</em>
			</p>
			</div>
		</div>
		<div id="status">saved</div>
	</body>
</html>
